<template>
	<div class="verifiedForm">
		<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
			<FormItem label="姓名" prop="name">
				<Input type="text" v-model="formCustom.name"></Input>
			</FormItem>
			<FormItem label="银行卡号" prop="acctNo">
				<Input type="text" v-model="formCustom.acctNo"></Input>
				<div class="tips">
					<Icon type="ios-alert" color="red" />请填写本人信息开通的银行卡号
				</div>
			</FormItem>
			<FormItem label="证件类型" prop="reportType">
				<Select v-model="formCustom.reportType" clearable>
					<Option v-for="(item,index) in reportTypeLists" :value="item.value" :key="index">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="证件号" prop="certNo">
				<Input type="text" v-model="formCustom.certNo" ></Input>
				<div class="tips">
					<Icon type="ios-alert" color="red" />请填写用于开通上述银行卡号的证件信息
				</div>
			</FormItem>
			<FormItem>
				<Checkbox v-model="formCustom.agree">同意《XXXXX》协议</Checkbox>
			</FormItem>
			<FormItem>
				<Button type="error" @click="handleSubmit('formCustom')">实名认证</Button>
				<Button type="error" ghost @click="abandonCertification=true" style="margin-left: 18px">放弃认证</Button>
			</FormItem>
		</Form>
	    <Modal v-model="abandonCertification" title="是否确认放弃实名认证" class="abandonCertification">
	    	<Row>
	    		<Col>
	    		<p>未经实名认证，无法线上签署租约、查看租约、支付账单等租中租后业务</p>
	    		</Col>
	    	</Row>
	    	<div slot="footer">
	    		<Button type="error" size="large" ghost @click="cancel">取消</Button>
	    		<Button type="error" size="large" @click="ok">确认</Button>
	    	</div>
	    </Modal>
	   <!-- <Modal v-model="certificateIsSuccess" title="认证结果"  class="abandonCertification">
	    	<Row>
	    		<Col>
	    		<p class="title">{{certificateMsg}}</p>
	    		</Col>
	    	</Row>
			<div slot="footer">
				<Button type="error" size="large" ghost @click="cancelHandle">取消</Button>
				<Button type="error" size="large" @click="okHandle">确认</Button>
			</div>
	    </Modal> -->
	</div>

</template>
<script>
	export default {
		data() {
			return {
				formCustom: {
					name: '',
					acctNo: '',
					certNo: '',
					agree:true
				},
				// certificateMsg:"",
				abandonCertification:false,
				certificateIsSuccess:false,
				reportTypeLists: [{
						name: "居民身份证",
						value: "01"
					},
					{
						name: "军官证",
						value: "02"
					}, {
						name: "护照",
						value: "03"
					}, {
						name: "回乡证",
						value: "04"
					}, {
						name: "台胞证",
						value: "05"
					}, {
						name: "警官证",
						value: "06"
					}, {
						name: "士兵证",
						value: "07"
					}, {
						name: "其它证件",
						value: "99"
					}
				],
				ruleCustom: {
					name: [{
						required: true,
						message: "输入姓名",
						trigger: 'blur'
					}],
					acctNo: [{
						required: true,
						message: "输入银行卡号",
						trigger: 'blur'
					}],
					certNo: [{
						required: true,
						message: "输入证件号",
						trigger: 'blur'
					}],
					reportType: [{
						required: true,
						message: "请选择",
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.formCustom.instanceId="I000000000000000002";
						let data=JSON.parse(JSON.stringify(this.formCustom));
						delete data.agree;
						this.$ajax.post(this, this.$api.POST_REAL, data, (res) => {
							if (res.code == "200") {
								this.$Modal.success({
									title: "认证结果！",
									content:"认证通过"
								});
							}
						});
					} else {
						this.$Modal.warning({
							title: "提示",
							content: "输入必填项"
						});
					}
				})
			},
			handleReset(name) {
				this.$refs[name].resetFields();
			},
			cancel(){
				this.abandonCertification=false;
			},
			ok(){
				this.abandonCertification=false;
			},
			cancelHandle(){
				this.certificateIsSuccess=false;
			},
			okHandle(){
				this.certificateIsSuccess=false;
			}
		}
	}
</script>
<style>
	.verifiedForm .ivu-checkbox-checked .ivu-checkbox-inner {
		border-color: red !important;
		background-color: red !important;
	}
</style>
<style scoped>
	.verifiedForm {
		width: 320px;
		margin: 50px auto;
	}
</style>
